import React, { FC } from 'react';
import styled from 'styled-components';

interface IProps {
  round?: boolean,
  src?: string,
  onClick?(): void
}

const ImageView: FC<IProps> = (props) => {
  const { src, round, onClick } = props;
  return <ImageContainer round={round} onClick={onClick}>
    <img src={src} />
  </ImageContainer>
}

const ImageContainer = styled.div`
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  /* background: red; */
  img {
    width: 100%;
    height: 100%;
    border-radius: ${(props: IProps) => props.round ? '50%': ''}
  }
`;

export default ImageView;